document.addEventListener('DOMContentLoaded', function() {
  // 选择 DOM 元素
  const goodsListContainer = document.querySelector('.list.container');
  const pageInput = document.querySelector('.pagination .jump');
  const pageSizeDropdown = document.querySelector('.pagination .pagesize');
  const totalPagesElement = document.querySelector('.pagination .total');
  const searchField = document.querySelector('.filter .search');
  const categoriesContainer = document.querySelector('.category');
  const filterContainer = document.querySelector('.filterBox');
  const saleContainer = document.querySelector('.saleBox');
  const sortContainer = document.querySelector('.sortBox');
  const firstPageBtn = document.querySelector('.pagination .first');
  const prevPageBtn = document.querySelector('.pagination .prev');
  const nextPageBtn = document.querySelector('.pagination .next');
  const lastPageBtn = document.querySelector('.pagination .last');

  // 初始化变量
  let currentPage = 1;
  let pageSize = 12;
  let searchKeyword = '';
  let filterType = '';
  let discountType = 10;
  let sortType = 'id';
  let sortMethod = 'ASC';
  let categoryType = '';
  let totalItems = 0;

  // 加载商品列表
  async function getGoodsList() {
    try {
      const params = {
        current: currentPage,
        pagesize: pageSize,
        search: searchKeyword,
        filter: filterType,
        saleType: discountType,
        sortType: sortType,
        sortMethod: sortMethod,
        category: categoryType
      };

      const response = await axios.get('http://localhost:9000/goods/list', { params });
      if (response.data.code === 1) {
        displayGoods(response.data.list);
        updatePagination(response.data.total);
        totalItems = response.data.total;
      } else {
        console.error('获取商品列表失败');
      }
    } catch (error) {
      console.error('获取商品列表出错:', error);
    }
  }

  // 显示商品列表
  function displayGoods(goodsList) {
    goodsListContainer.innerHTML = '';

    if (goodsList.length === 0) {
      goodsListContainer.innerHTML = '<p>没有找到相关商品</p>';
      return;
    }

    goodsList.forEach(goods => {
      const goodsItem = document.createElement('li');
      goodsItem.dataset.id = goods.goods_id;

      goodsItem.innerHTML = `
        <div class="show">
          <img src="${goods.img_big_logo}" alt="${goods.title}">
          ${goods.is_hot ? '<span class="hot">热销</span>' : ''}
          ${goods.is_sale ? `<span class="sale">${goods.sale_type}</span>` : ''}
        </div>
        <div class="info">
          <p class="title">${goods.title}</p>
          <p class="price">
            <span class="curr">¥ ${goods.current_price}</span>
            ${goods.is_sale ? `<span class="old">¥ ${goods.price}</span>` : ''}
          </p>
        </div>
      `;

      goodsItem.addEventListener('click', () => {
        window.location.href = `detail.html?id=${goods.goods_id}`;
      });

      goodsListContainer.appendChild(goodsItem);
    });
  }

  // 更新分页
  function updatePagination(total) {
    const totalPages = total;
    totalPagesElement.textContent = `${currentPage} / ${totalPages}`;

    firstPageBtn.classList.toggle('disable', currentPage === 1);
    prevPageBtn.classList.toggle('disable', currentPage === 1);
    nextPageBtn.classList.toggle('disable', currentPage === totalPages);
    lastPageBtn.classList.toggle('disable', currentPage === totalPages);
  }

  // 加载分类列表
  async function getCategoryList() {
    try {
      const response = await axios.get('http://localhost:9000/goods/category');
      if (response.data.code === 1) {
        displayCategories(response.data.list);
      } else {
        console.error('获取分类列表失败');
      }
    } catch (error) {
      console.error('获取分类列表出错:', error);
    }
  }

  // 显示分类列表
  function displayCategories(categories) {
    categoriesContainer.innerHTML = '<li class="active" data-type="">全部</li>';
    categories.forEach(category => {
      const categoryItem = document.createElement('li');
      categoryItem.dataset.type = category;
      categoryItem.textContent = category;
      categoriesContainer.appendChild(categoryItem);
    });

    document.querySelectorAll('.category li').forEach(categoryItem => {
      categoryItem.addEventListener('click', ({ target }) => {
        if (target.nodeName === 'LI') {
          document.querySelectorAll('.category li').forEach(li => li.classList.remove('active'));
          target.classList.add('active');
          categoryType = target.dataset.type;
          currentPage = 1;
          getGoodsList();
        }
      });
    });
  }

  // 事件监听
// 为过滤器容器添加点击事件监听器
filterContainer.addEventListener('click', ({ target }) => {
  // 如果点击的是LI元素
  if (target.nodeName === 'LI') {
    // 移除所有过滤器项的活动状态
    document.querySelectorAll('.filterBox li').forEach(li => li.classList.remove('active'));
    // 为当前点击的项目添加活动状态
    target.classList.add('active');
    // 获取过滤器类型
    filterType = target.dataset.type;
    // 重置当前页为第一页
    currentPage = 1;
    // 获取商品列表
    getGoodsList();
  }
});

// 为促销容器添加点击事件监听器
saleContainer.addEventListener('click', ({ target }) => {
  // 如果点击的是LI元素
  if (target.nodeName === 'LI') {
    // 移除所有促销项的活动状态
    document.querySelectorAll('.saleBox li').forEach(li => li.classList.remove('active'));
    // 为当前点击的项目添加活动状态
    target.classList.add('active');
    // 获取促销类型并转换为整数
    discountType = parseInt(target.dataset.type, 10);
    // 重置当前页为第一页
    currentPage = 1;
    // 获取商品列表
    getGoodsList();
  }
});

// 为排序容器添加点击事件监听器
sortContainer.addEventListener('click', ({ target }) => {
  // 如果点击的是LI元素
  if (target.nodeName === 'LI') {
    // 移除所有排序项的活动状态
    document.querySelectorAll('.sortBox li').forEach(li => li.classList.remove('active'));
    // 为当前点击的项目添加活动状态
    target.classList.add('active');
    // 获取排序类型
    sortType = target.dataset.type;
    // 获取排序方法
    sortMethod = target.dataset.method;
    // 重置当前页为第一页
    currentPage = 1;
    // 获取商品列表
    getGoodsList();
  }
});

// 为每页显示数量的下拉菜单添加改变事件监听器
pageSizeDropdown.addEventListener('change', () => {
  // 获取每页显示数量并转换为整数
  pageSize = parseInt(pageSizeDropdown.value, 10);
  // 重置当前页为第一页
  currentPage = 1;
  // 获取商品列表
  getGoodsList();
});

// 为页码输入框添加改变事件监听器
pageInput.addEventListener('change', () => {
  // 获取当前页码并转换为整数
  currentPage = parseInt(pageInput.value, 10);
  // 获取商品列表
  getGoodsList();
});

// 为搜索字段添加输入事件监听器
searchField.addEventListener('input', () => {
  // 获取搜索关键字
  searchKeyword = searchField.value;
  // 重置当前页为第一页
  currentPage = 1;
  // 获取商品列表
  getGoodsList();
});

// 为第一页按钮添加点击事件监听器
firstPageBtn.addEventListener('click', () => {
  // 设置当前页为第一页
  currentPage = 1;
  // 获取商品列表
  getGoodsList();
});

// 为上一页按钮添加点击事件监听器
prevPageBtn.addEventListener('click', () => {
  // 如果当前页大于1
  if (currentPage > 1) {
    // 当前页减一
    currentPage--;
    // 获取商品列表
    getGoodsList();
  }
});

// 为下一页按钮添加点击事件监听器
nextPageBtn.addEventListener('click', () => {
  // 如果当前页小于总页数
  if (currentPage < totalItems) {
    // 当前页加一
    currentPage++;
    // 获取商品列表
    getGoodsList();
  }
});

// 为最后一页按钮添加点击事件监听器
lastPageBtn.addEventListener('click', () => {
  // 设置当前页为最后一页
  currentPage = totalItems;
  // 获取商品列表
  getGoodsList();
});


  // 初次加载
  getCategoryList();
  getGoodsList();
});
